<template>
    <div>
        <!-- 添加成员 -->
        <el-button type="primary" size="mini" @click="handleInsert()">添加成员</el-button>
        <!-- 表格 -->
        <el-table :data="students">
            <!-- 表头 -->
            <el-table-column label="编号" prop="id"></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="性别" prop="sex"></el-table-column>
            <el-table-column label="年龄" prop="age"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <!-- 修改删除按钮 -->
                <template slot-scope="scope">
                    <el-button @click="handleUpdate(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <!-- 修改弹框 -->
        <el-dialog width="22%" :visible.sync="updateDialogVisible">
            <el-form :model="updateForm">
                <el-form-item label="编号">
                    <el-input size="mini" :readonly="true" v-model="updateForm.id"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input size="mini" v-model="updateForm.name"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select size="mini" v-model="updateForm.sex">
                        <el-option value="男"></el-option>
                        <el-option value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input size="mini" v-model="updateForm.age"></el-input>
                </el-form-item>
                <!-- 确定按钮 -->
                <el-form-item>
                    <el-button type="primary" size="mini" @click="confirmUpdate()">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 新增弹框 -->
        <el-dialog width="22%" :visible.sync="insertDialogVisible">
            <el-form :model="insertForm">
                <el-form-item label="姓名">
                    <el-input size="mini" v-model="insertForm.name"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select size="mini" v-model="insertForm.sex">
                        <el-option value="男"></el-option>
                        <el-option value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input size="mini" v-model="insertForm.age"></el-input>
                </el-form-item>
                <!-- 确定按钮 -->
                <el-form-item>
                    <el-button type="primary" size="mini" @click="confirmInsert()">确定</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>
    </div>
</template>
<script>
import {all, deleteById, update, insert} from '@/api/student'
const options = {
    // 钩子函数
    mounted() {
        // 加载所有数据
        this.all()
    },
    data() {
        return {
            students: [], // 学生数据
            updateDialogVisible: false, // 默认关闭修改框
            insertDialogVisible: false, // 默认关闭插入框
            insertForm: { // 新增框数据
                name: '',
                sex: '',
                age: 0
            },
            updateForm: { // 修改框数据
                id: 0,
                name: '',
                sex: '男',
                age: 0
            }
        }
    },
    methods: {
        // 加载所有数据
        async all() {
            const {data} = await all()
            this.students = data
        },
        // 插入数据
        handleInsert() {
            this.resetInsertForm() // 清除上次添加的记录
            this.insertDialogVisible = true // 显示新增框
        },
        // 确认插入数据
        async confirmInsert() {
            await insert(this.insertForm)
            this.insertDialogVisible = false // 隐藏修改框
            this.all() // 重新加载数据
        },
        // 修改数据
        handleUpdate(row) {
            this.updateDialogVisible = true // 显示修改框
            this.updateForm = { ...row } // 将该行数据显示到修改框
        },
        // 确认修改数据
        async confirmUpdate() {
            await update(this.updateForm.id, this.updateForm)
            this.updateDialogVisible = false // 隐藏修改框
            this.all() // 重新加载数据
        },
        // 删除
        async handleDelete(row) {
            try {
                // 确认提示框
                await this.$confirm('此操作将永久删除该条数据，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                await deleteById(row.id) // 删除数据
                this.all() // 删除后重新加载数据
            } catch(e) {
                console.log('取消删除')
            }
        },
        // 重置添加数据框
        resetInsertForm() {
            this.insertForm = {
                name: '',
                sex: '',
                age: 0
            }
        }
    }
}
export default options
</script>